<template>
    <el-card class="cart-continer" style="width: 80vw;height: 100%;margin-left: 10vw;">
        <div style=" width: 100%;,height: 20vh; float: left;display:flex;">
            <el-card class="cartbox">
                <slot>
                    <div style="display: flex;">
                        <div>
                            <p style="font-size: 50px;font-weight: 51px;margin-top: 10px;margin-bottom: 0px;">88</p>
                            <p style="font-weight: 50px;font-weight: bold;margin-top: 3px;">今日挂号人次</p>
                            <p>较昨日上涨</p>
                        </div>
                        <div style="margin: auto;">
                            <el-avatar :size="50" src="src/assets/business/今日挂号人.png" fit="cover" />
                        </div>
                    </div>
                </slot>

            </el-card>
            <el-card class="cartbox">
                <slot>
                    <div style="display: flex;">
                        <div>
                            <p style="font-size: 50px;font-weight: 51px;margin-top: 10px;margin-bottom: 0px;">88</p>
                            <p style="font-weight: 50px;font-weight: bold;margin-top: 3px;">今日挂号人次</p>
                            <p>今日接诊人次</p>
                        </div>
                        <div style="margin: auto;">
                            <el-avatar :size="50" src="src/assets/business/今日挂号人.png" fit="cover" />
                        </div>
                    </div>
                </slot>

            </el-card>
            <el-card class="cartbox">
                <slot>
                    <div style="display: flex;">
                        <div>
                            <p style="font-size: 50px;font-weight: 51px;margin-top: 10px;margin-bottom: 0px;">88</p>
                            <p style="font-weight: 50px;font-weight: bold;margin-top: 3px;">今日挂号人次</p>
                            <p>今日收入合计</p>
                        </div>
                        <div style="margin: auto;">
                            <el-avatar :size="50" src="src/assets/business/今日挂号人.png" fit="cover" />
                        </div>
                    </div>
                </slot>

            </el-card>
            <el-card class="cartbox">
                <slot>
                    <div style="display: flex;">
                        <div>
                            <p style="font-size: 50px;font-weight: 51px;margin-top: 10px;margin-bottom: 0px;">88</p>
                            <p style="font-weight: 50px;font-weight: bold;margin-top: 3px;">今日挂号人次</p>
                            <p>今日新增会员数</p>
                        </div>
                        <div style="margin: auto;">
                            <el-avatar :size="50" src="src/assets/business/今日挂号人.png" fit="cover" />
                        </div>
                    </div>
                </slot>
            </el-card>

        </div>
        <div style=" width: 100%; height: 39vh; float: left;display:flex;">
            <el-card :body-style="{ padding: '20px' }" style="width: 70%;height: 35vh;">
                <template #header>诊所收入趋势</template>
                <div class="testbox" ref="testbox" style="height: 300px;,width: 200px;">
                </div>
            </el-card>
            <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-left: 20px; width: 30%;height: 35vh">
                <template #header>
                    <div>
                        <span>今日会员消费占比</span>
                    </div>
                </template>
                <div class="annular" ref="annular" style="width: 100%;height: 20vh;">
                </div>
                <template #footer style="width: 100%;height: 24vh;">
                    总火化人数xxx
                </template>
            </el-card>

        </div>
        <div>
            <el-card shadow="always" :body-style="{ padding: '20px' }">
                <template #header>
                    <div>
                        <span>今日门诊记录</span>
                    </div>
                </template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column class="tableColumn" prop="id" label="序号" width="80">
                        <template #default="scope">{{ scope.$index }}</template>
                    </el-table-column>
                    <el-table-column class="tableColumn" prop="treatmentStatus" label="就诊状态" width="180" />
                    <el-table-column class="tableColumn" prop="name" label="患者编号" width="180" />
                    <el-table-column class="tableColumn" prop="name" label="患者姓名" width="180" />
                    <el-table-column class="tableColumn" prop="address" label="性别" />
                    <el-table-column class="tableColumn" prop="address" label="年龄" />
                    <el-table-column class="tableColumn" prop="address" label="手机号" />
                    <el-table-column class="tableColumn" prop="address" label="门诊类型" />
                    <el-table-column class="tableColumn" prop="address" label="科室" />
                    <el-table-column class="tableColumn" prop="address" label="挂号医生" />
                    <el-table-column class="tableColumn" prop="date" label="最后更新时间" width="180" />
                </el-table>
            </el-card>


        </div>
        <div style="margin-top: 20px;">
            <el-pagination v-model:current-page="reqPage.cunrent" 
                
                layout=" prev, pager, next,slot,total, jumper" :total="reqPage.total" 
                @current-change="handleCurrentChange" :page-size="reqPage.size">
                <slot id ="text">
                 每页{{ reqPage.size }}条
                </slot>
            </el-pagination>
        </div>


    </el-card>
</template>

<script  setup>
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
let testbox = ref();
let annular = ref();
const reqPage = reactive({
    size: 10,
    cunrent: 1,
    total:40
})
const handleCurrentChange = (value) =>{
console.log(value);
}
const tableData = [
    {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    }, {
        date: '2016-05-03',
        id: 1,
        name: 'Tom',
        address: 'Grove St',
        treatmentStatus: "好了"
    },
]
const XAxisData = ref(['2016-05-03', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
const seriesData = ref([820, 932, 901, 934, 1290, 1330, 1820])
onMounted(() => {
    let mycharts = echarts.init(testbox.value)
    mycharts.setOption({
        tooltip: {
            trigger: 'item',
            textStyle: { // 悬浮框文字样式
                color: '#000'
            }
        },
        title: {
            text: "单位亿"
        },
        xAxis: {
            type: 'category',
            data: XAxisData.value
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: seriesData.value,
                type: 'line',
                smooth: true,
                colorBy: '#91cc75',
            }
        ]
    });
    let myannular = echarts.init(annular.value)

    myannular.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '1%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '会员火化' },
                    { value: 735, name: '非会员火化' }
                ]
            }
        ]
    });
})
</script>

<style scoped>
.cartbox {
    width: 22%;
    margin: 20px;
}

.cart-continer {
    margin-left: 5vw;
    margin-top: 20px;
}

.tableColumn {
    margin: 0 0 0 3px;
}
</style>